<script lang="ts" setup>
import {formatDate} from "@/utils/time";
import type {UserAnimalItem} from "@/types/user";
import {ref, watch} from "vue";
import {cancelUserUploadApi, delUserUploadApi, reUserUploadApi} from "@/api/user";
import {IMessage} from "@/components/aw-message/message";

const props = defineProps<{
  uploadList: UserAnimalItem[]
}>()

const emit = defineEmits<{
  cancel: [id: number]
  delete: [id: number]
  re_upload: [id: number]
}>()
const isNoData = ref(false)

watch(props, () => {
  isNoData.value = props.uploadList.length <= 0
})
// 点击动物图片进入详情页
const goDetail = (id: number, status: 0 | 1 | 2 | 3) => {
  if (status !== 1) {
    return
  }
  uni.navigateTo({
    url: '/subPkg/detail/detail?id=' + id
  })
}
//用户手动取消上传
const cancelPopup = ref() // 取消弹框
const delPopup = ref() // 删除弹框
const re_uploadPopup = ref()
const currentId = ref()
const currentAuditId = ref()
const handleUserCancelUpload = (index: number) => {
  currentId.value = props.uploadList[index].id
  currentAuditId.value = props.uploadList[index].auditId
  cancelPopup.value.open()
}
const handleUserDelUpload = (index: number) => {
  currentId.value = props.uploadList[index].id
  currentAuditId.value = props.uploadList[index].auditId
  checkDel.value = '确认删除' + props.uploadList[index].name
  delPopup.value.open()
}

// 点击重新上传
const currentUpload = ref<UserAnimalItem>({} as UserAnimalItem)
let tempUpload = ref<UserAnimalItem>({} as UserAnimalItem)
const handleUserRe_Upload = (index: number) => {
  currentId.value = props.uploadList[index].id
  currentAuditId.value = props.uploadList[index].auditId
  currentUpload.value = props.uploadList[index]
  tempUpload.value = {...currentUpload.value} // 这里需要浅拷贝一下，不然会影响原值
  re_uploadPopup.value.open()
}
//确认取消上传
const onConfirmCancel = async () => {
  await cancelUserUploadApi(currentId.value, currentAuditId.value)
  IMessage({
    content: '已取消上传',
    type: 'success',
    showIcon: true
  })
  emit('cancel', currentId.value)
}

// 确认删除
const checkDel = ref('')
const onConfirmDel = async (value: string) => {
  await delUserUploadApi(currentId.value, currentAuditId.value)
  if (value !== checkDel.value) {
    return uni.showToast({
      title: '删除失败！请正确输入',
      icon: 'none'
    })
  }
  IMessage({
    content: '已删除该数据',
    type: 'success',
    showIcon: true
  })
  emit('cancel', currentId.value)
}

// 确认重新上传
const onConfirmRe_upload = async () => {
  if (tempUpload.value.name === '' || tempUpload.value.imgURL === ''
      || tempUpload.value.description === '' || tempUpload.value.tags === ''
      || tempUpload.value.classification === '' || tempUpload.value.protectionLevel === ''
      || tempUpload.value.distribution === '') {
    return uni.showToast({
      title: '请填写完整信息',
      icon: 'none'
    })
  }
  uni.showLoading({title: '上传中...'})
  try {
    await reUserUploadApi(tempUpload.value)
  } catch (e) {
    console.log(e);
  }
  uni.hideLoading()
  uni.showToast({title: '上传成功', icon: 'success'})
  re_uploadPopup.value.close()
  emit('re_upload', currentId.value)
}
const onCloseRe_upload = () => {
  currentId.value = 0
  currentAuditId.value = 0
  re_uploadPopup.value.close()
}

const handleUserShare = (index: number) => {
  uni.showToast({
    title: '已复制链接',
    icon: 'none'
  })
}

</script>

<template>
  <view v-if="uploadList?.length>0" class="audit-list">
    <view v-for="(item,index) in uploadList" class="audit-list-item">
      <view class="item-top" @click="goDetail(item.animalId,item.status)">
        <view class="" style="width: 400rpx;height: 220rpx;flex: 2">
          <uv-image :src="item.imgURL" height="100%" mode="aspectFill" radius="20rpx" width="100%"></uv-image>
        </view>
        <view class="flex flex-column margin-left-sm" style="gap: 10px;flex: 3">
          <view>
            {{ item.name }}
          </view>
          <text class="audit-desc text-gray ">
            {{ item.description }}
          </text>
          <text class="text-gray">
            {{ formatDate(Date.parse(item.createTime)) }}
          </text>
        </view>
      </view>
      <view class="item-center">
        <view v-if="item.status===0" class="cu-tag round status-pending">待审核</view>
        <view v-if="item.status===1" class="cu-tag round status-success">已通过</view>
        <view v-if="item.status===2" class="cu-tag round status-error">未通过</view>
        <view v-if="item.status===3" class="cu-tag round status-cancel">已取消</view>
      </view>
      <view class="item-bottom ">
        <view v-if="item.status===0" class="item-bottom-item flex justify-center align-center">
          <view class="cu-btn text-gray radius" @click="handleUserCancelUpload(index)">取消上传</view>
        </view>
        <view v-if="item.status===1" class="flex justify-center align-center" style="gap: 10px">
          <view class="cu-btn  bg-gradual-awGreen radius cuIcon-share" @click="handleUserShare(index)">分享</view>
          <view class="cu-btn  bg-gradual-red radius cuIcon-delete" @click="handleUserDelUpload(index)">删除</view>
        </view>
        <view v-if="item.status===2" class="flex justify-center align-center" style="gap: 10px">
          <view class="cu-btn text-gray radius" @click="handleUserRe_Upload(index)">重新上传</view>
          <view class="cu-btn text-gray radius" @click="handleUserDelUpload(index)">删除</view>
        </view>
        <view v-if="item.status===3" class="flex justify-center align-center" style="gap: 10px">
          <view class="cu-btn text-gray radius" @click="handleUserRe_Upload(index)">重新上传</view>
          <view class="cu-btn text-gray radius" @click="handleUserDelUpload(index)">删除</view>
        </view>
      </view>
    </view>
    <view class="text-gray flex justify-center margin-top-sm padding-bottom-lg" style="width: 100%">暂无更多数据~(≧∇≦)ﾉ</view>
  </view>
  <view v-else class="flex justify-center align-center bg-white flex-column" style="width: 100%;height: 100%">
    <uv-image height="300px" src="/static/empty-data.png" width="300px"></uv-image>
    <view class="text-gray flex justify-center margin-top-sm padding-bottom-lg" style="width: 100%">暂无更多数据~(≧∇≦)ﾉ</view>
  </view>

  <uni-popup ref="cancelPopup" type="center">
    <uni-popup-dialog cancel-text="手滑了" confirm-text="取消上传"
                      content="提示取消后的数据可在“失败/取消”中再次上传"
                      title="确定取消上传"
                      type="info" @confirm="onConfirmCancel">
    </uni-popup-dialog>
  </uni-popup>
  <uni-popup ref="delPopup" type="center">
    <uni-popup-dialog :placeholder="'请输入：'+checkDel" cancel-text="手滑了"
                      confirm-text="删除"
                      content="提示删除后的数据不可找回！！！"
                      mode="input"
                      title="确定删除上传数据"
                      type="error" @confirm="onConfirmDel">
    </uni-popup-dialog>
  </uni-popup>
  <uni-popup ref="re_uploadPopup" type="bottom">
    <scroll-view :scroll-y="true" class="bg-white"
                 style="width: 100%;height: 100vh;border-radius: 15px 15px 0 0;padding-top: 120rpx">
      <view class="flex flex-column padding-lg" style="gap: 10px">
        <view class="flex justify-center flex-column padding-sm" style="width: 100%;min-height: 100px;gap: 10px">
          <view class="text-black">主图</view>
          <uv-image :src="currentUpload?.imgURL" height="100" radius="10" width="100"></uv-image>
        </view>
        <view class="flex flex-column justify-center padding-sm" style="width: 100%;min-height: 100px;gap: 10px">
          <view class="text-black">副图</view>
          <view class="flex align-center" style="gap: 10px">
            <view v-for="(item,index) in currentUpload?.imgList.split(',')" class="flex align-center" style="gap: 10px">
              <uv-image :src="item" height="60" radius="6" width="60"></uv-image>
            </view>
          </view>
        </view>
        <view class="flex flex-column justify-center padding-sm re-input"
              style="width: 100%;min-height: 100px;gap: 15px">
          <view class="flex detail align-center" style="gap: 10px">
            <text class="text-black text-lg">名称</text>
            <input v-model="tempUpload.name"/></view>
          <view class="flex detail align-center" style="gap: 10px">
            <text class="text-black text-lg">分类</text>
            <input v-model="currentUpload.classification"/></view>
          <view class="flex detail align-center" style="gap: 10px">
            <text class="text-black text-lg">级别</text>
            <input v-model="tempUpload.protectionLevel"/></view>
          <view class="flex detail align-center" style="gap: 10px">
            <text class="text-black text-lg">分布</text>
            <input v-model="tempUpload.distribution"/></view>
          <view class="flex detail align-center" style="gap: 10px">
            <text class="text-black text-lg">简述</text>
            <textarea v-model="tempUpload.description" maxlength="500" style="height: 100px"/></view>
          <view class="flex detail align-center" style="gap: 10px">
            <text class="text-black text-lg">标签</text>
            <input v-model="tempUpload.tags"/></view>
          <view v-show="tempUpload.tags?.length>0" class="flex detail align-center" style="gap: 10px">
            <text class="text-black text-lg">标签预览</text>
            <text v-for="item in tempUpload.tags?.split(',')" class="cu-tag bg-gradual-awGreen round">{{ item }}</text>
          </view>
          <text class="text-gray" style="font-size: 10px">
            <text class="line-red">注意</text>
            标签的修改需要用
            <text class="line-red">英文“,”</text>
            分隔（逗号），否则可能识别错误！
          </text>
        </view>

      </view>
      <view class="flex justify-around align-center" style="width: 100%;min-height: 30px">
        <button class="cu-btn round lg bg-gray" @click="onCloseRe_upload">取消</button>
        <button class="cu-btn round lg bg-gradual-awGreen margin-top-sm" style="gap: 5px" @click="onConfirmRe_upload">
          重新上传
          <uni-icons color="#fff" type="upload"></uni-icons>
        </button>
      </view>
    </scroll-view>
  </uni-popup>
</template>

<style lang="scss" scoped>
.audit-list {
  margin-top: 20rpx;
  width: 100%;

  &-item {
    width: 100%;
    min-height: 150rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .item-top {
      width: 100%;
      flex: 6;
      min-height: 220rpx;
      display: flex;
      justify-content: space-around;
      padding: 10rpx 20rpx;
      align-items: center;
      gap: 10px;
    }

    .item-center {
      width: 100%;
      flex: 3;
      border-bottom: #e6e6e6 1px solid;
      border-top: #e6e6e6 1px solid;
      min-height: 80rpx;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      justify-content: space-between;
      //margin: 10px 0;
    }

    .item-bottom {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 10px;
      width: 100%;
      flex: 1;
      min-height: 80rpx;
      padding: 10rpx 20rpx;

      &-item {
        gap: 10px;
      }
    }
  }
}

.detail {
  input {
    flex: 1;
  }
}

.status-pending {
  color: #E6A23C;
  background-color: #FFF6E6 !important;
}

.status-success {
  color: #39c5bb;
  background-color: #EBF9F8 !important;
}

.status-error {
  color: #F56C6C;
  background-color: #FEF0F0 !important;
}

.status-cancel {
  color: #909399;
  background-color: #F4F4F5 !important;
}

.audit-desc {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: normal !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.re-input input {
  border-bottom: #e6e6e6 1px solid !important;
  caret-color: #39c5bb !important;
}
</style>